<template>
  <div class="modal" v-if="isModalOpen">
    <div class="modal-footer">
      <button @click="closeModal">关闭</button>
    </div>
    <div class="modal-content">
      <div style="width: 300px; height: 300px">
        <Mapchart />
      </div>
      <div>
        <searthTable />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const isModalOpen = ref(true);
import Mapchart from "@/components/charts/Mapchart/index.vue";

import searthTable from "@/components/tabs/searthTable/index.vue";
const openModal = () => {
  isModalOpen.value = true;
};
const closeModal = () => {
  isModalOpen.value = false;
};
</script>
<style scoped lang="scss">
.modal {
  /* display: none; */
  position: absolute;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  .modal-content {
    background-image: url("./imgs/image.png");
    background-repeat: no-repeat;
    background-position: center center;
    padding: 20px;
    width: 80%;
    max-width: 1670px;
    min-height: 621px;
    max-height: 621px;
    display: flex;
  }
  .modal-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
